﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件，找到文件所在的路径 -->
    <script src="/js/plugins/echarts/echarts.common.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom（文档对象模型） -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例（用的是原生的js，没有jQuery（可以不依赖jQuery，所以页面可以不引用jQuery）去获取对象做相关的事情）
        document.getElementById('main') // 原生js的
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据（直接拷贝 官方实例的柱状图）
        var option = {
    title: {
        text: '潜在客户报表',
        subtext: "分组类型：${groupTypeName}"  <#-- 子标题(注意：'分组类型：${qo.groupTypeName}' 会出错，参数问题。将第一对''封装成字符串，但是后面的就没有用了。所以改为“”) -->
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        // data: ['蒸发量', '降水量'] （多个柱状数据列）
        data: ['潜在客户数']
    },
    toolbox: {
        show: true,
        feature:{
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: ${xList}// ['admin','赵一明','钱二明','王者荣耀']
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '潜在客户数',
            type: 'bar',
            data: ${yList}, // [8.0, 15.0, 7.0, 23.2],
            markPoint:{data:[
            {type: 'max', name: '最大值'},
            {type: 'min', name: '最小值'}
        ]},
            markLine: {
                data: [
                    {type: 'average', name: '平均值'}
                ]
            }
        }
        // ,{。。。。} 多个数据的时候
    ]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>